<template>
  <div class="htmlbacc" ref="htmlbacc">
    <div class="container">
      <!-- <div class="bigbox"> -->
      <nav style="margin-top: 40px;">
        <div class="iconfont icon-fanhui" @click="back" style="font-size: 23px;"></div>
        <div class="cententbx" style="color: rgba(255, 255, 255, 0.5); ">这首歌很好听？试试分享给好友吧！

          <div class="zhizhen" v-show="dbshow" :class="{ playyes: playing, playno: !playing }">
          </div>
        </div>
        <div class="iconfont icon-fenxiang" style="font-size: 23px;" @click="fenxiangshow = true"></div>
      </nav>


      <div class="fenxiang" v-show="fenxiangshow">
        <div>{{ titleText }}</div>
        <div>当前链接: <span> http://localhost:8080/#/bofangqi?id={{ AudioplaysongId }}</span></div>

        <div><span @click="ctrlC">复制到剪贴板</span><span @click="fenxiangshow = false">取消</span></div>
      </div>
      <div class="fenxiangzhezhao" v-show="fenxiangshow" @click="fenxiangshow = false"></div>



      <div class="qiehuan">

        <!-- 专辑 -->
        <div class="lyricbox" v-show="dbshow">


          <div class="songimg anima" :class="{ playing: playing }" @click.stop="qie">
            <div class="imgbor">
              <img :src="song?.al?.picUrl" alt="" style="width: 100%" />
              <!-- <img src= alt=""> -->
            </div>
          </div>



        </div>

        <!-- 歌词 -->
        <div class="playsonglyeis" v-show="dbshow"> {{ playsonglyeis }} </div>
        <div v-show="!dbshow" style="position: relative;">


          <div class="lyricbox2" ref="gecibox" :scrollTop="gecitop" @touchstart="anxia" @touchend="sonkai"
            :class="{ playing: playing }">

            <div class="song" v-for="(item, index) in geci" :key="index" ref="lyricElm"
              :class='{ altt: index == songlyricIndex }' @click="genggai(item.time)">


              <!-- {{ item.text }} -->
              <span :style="{ animationDuration: ((geci[index + 1]?.time || songoverTime) - item.time) * 1 + 's', }">{{
                item.text }}</span>



            </div>

          </div>
          <!-- <div class="zhezhao"></div> -->
          <!-- <div class="zhezhao2"></div> -->

        </div>


      </div>



      <!-- 控制条 -->
      <div class="songTitle">
        <div class="leftbox">
          <span class="title">{{ song?.name }}</span>
          <span> {{ song?.ar[0]?.name }}</span>
        </div>
        <div class="rightbox">
          <div class="ShouCang" style="visibility: hidden;"><img src="../assets/Shoucang.png" alt=""></div>
          <div class="Pinglun" style="visibility: hidden"></div>
        </div>
      </div>
      <div class="BoFangic">
        <div class="time">
          <span v-if="!songoldTime">00:00</span>
          <span>{{ songoldTime | TimesetMS }}</span>
          <span>{{ songoverTime | TimesetMS }}</span>
          <input type="range" style="width: 100%" min="0" :max="songoverTime" v-model.number="userValue"
            @input="inputing = true" @change="
              inputing = false;
            $emit('changeSongTime', userValue);
            " />
        </div>
        <div class="btnbox">
          <div class="iconfont icon-23_shunxubofang" style="font-size:30px;visibility: hidden;"></div>

          <div class="iconfont icon-shangshou" @click="$emit('Previoussong')" style="font-size: 30px;"></div>


          <div class="iconfont icon-bofang" v-show="!playing" @click.stop="$emit('playsong')" style="font-size: 60px;">

          </div>


          <div class="iconfont icon-zanting" v-show="playing" @click.stop="$emit('pauessong')" style="font-size: 60px;">

          </div>


          <div class="iconfont icon-xiashou" @click="$emit('nextsong')" style="font-size: 30px;"></div>


          <div class="iconfont icon-yinlebofangliebiao" @click="liebiaoqiehuan" style="font-size: 25px;"></div>
        </div>
      </div>

      <!-- <audio controls :src="`https://music.163.com/song/media/outer/url?id=${$route.query.id}.mp3`"></audio> -->
      <!-- </div> -->


      <!-- 列表 -->
      <div class="zhezhao songList" v-if="listShow" @click="listShow = false"></div>

      <transition name="slide">
        <div class="songList lb" v-show="listShow">
          <BFlist v-for="songitm of songlist" :key="songitm.id" :item="songitm"
            @Playlistmuc="$emit('Playlistmuc', $event)" @delsong="$emit('delsong', $event)" :playing="playing"
            :AudioplaysongId="AudioplaysongId">
          </BFlist>
        </div>
      </transition>

    </div>

  </div>
</template>

<script>
import BFlist from '@/components/BFlist.vue';

export default {
  components: {
    BFlist
  },

  props: {
    songXiangqing: Object,
    AudioplaysongId: Number,
    playing: Boolean,
    songoverTime: Number,
    songoldTime: Number,
    songlist: Array,
    Audioplaysong: Object,
  },
  data() {
    return {
      jindu: null,
      geci: null,
      dbshow: true,
      song: null,
      userValue: 0,
      gecitop: 0,
      songlyrics: [],
      xuanzhon: true,
      timeroutId: null,
      titleText: '分享给好友？',
      fenxiangshow: false,
      listShow: false,

      playsonglyeis: null
    };
  },
  created() {
    this.songUpdata();
  },
  computed: {
    // 测试
    songlyricIndex: function () {
      // console.log(10, this.geci);
      return this.geci?.findLastIndex((item) => {
        return item.time <= this.songoldTime;
      });

      //   return this.currentTime;
    },

    // gecitext() {
    //   console.log(this.gecitop);

    //   return this.geci[this.gecitop]
    // }
  },
  methods: {
    // 切换歌词和专辑
    qie() {
      this.dbshow = !this.dbshow
      this.$nextTick(() => {
        console.log("歌词列表", this.$refs.lyricElm);

        this.songlyrics = this.$refs.lyricElm.map(
          (ele) => {
            console.log(ele.offsetHeight);

            return ele.offsetHeight

          }
        );
      });
    },
    // 返回

    back() {
      if (this.dbshow) {
        this.$router.back();
      } else {
        this.dbshow = true
      }
    },
    // 切换列表显隐
    liebiaoqiehuan() {
      this.listShow = !this.listShow
    },


    // 测试
    ctrlC() {
      async function writeToClipboard(text) {
        try {
          await navigator.clipboard.writeText(text);
          console.log('内容已复制到剪贴板');
        } catch (err) {
          console.error('无法复制内容到剪贴板: ', err);
        }
      }


      writeToClipboard(`http://localhost:8080/#/bofangqi?id=${this.AudioplaysongId}`);

      this.titleText = '链接复制已经复制至粘贴板！'

      setTimeout(() => {
        this.titleText = '分享给好友？'
      }, 2000)
    },



    // 更改
    genggai(time) {
      console.log(time);
      this.$emit('changeSongTime', time)
    },




    anxia() {
      this.xuanzhon = false
      if (this.timeroutId) {
        console.log("清除", this.timeroutId);
        clearTimeout(this.timeroutId);
        this.timeroutId = null;

      }


      // console.log('滑动');
    },
    sonkai() {
      this.timeroutId = setTimeout(() => {
        this.xuanzhon = true
        console.log('延时器执行');
      }, 5000);

    },

    // 获取内容
    songUpdata() {


      this.axios.get(`/lyric?id=${this.AudioplaysongId||this.$route.query.id}`).then((res) => {
        let songarr = res.data.lrc.lyric;
        // console.log("获取", songarr);

        let songGeci = songarr.split("\n").filter((item) => item);

        // console.log(songGeci);
        this.jindu = [...songGeci];
        var parsedLyric = songGeci.map((item, index) => {
          var res = item.match(
            /\[(?<m>\d{2}):(?<s>\d{2}\.\d{2,3})\](?<str>.*)/i
          );
          return {
            time: res ? res.groups.m * 60 + parseFloat(res.groups.s) : null,
            text: res ? res.groups.str.trim() : "Invalid lyric format",
            id: index,
          };
        });

        let ssrarr = parsedLyric.filter((item) => {
          return item.text != ''
        })
        // console.log(ssrarr);
        this.geci = [...ssrarr];

        // console.log("歌词", this.geci, "进度", this.jindu);

        // songGeci.match(/\[(?<m>\d{2}):(?<s>\d{2}\.\d{2,3})\](?<str>.*)/i)





      }),




        this.axios
          .get("/song/detail", {
            params: {
              ids: this.AudioplaysongId||this.$route.query.id,
            },
          })
          .then((res) => {
            this.song = res.data.songs[0];
            console.log("歌曲", this.song);

            let imgs = `url("${res.data.songs[0]?.al?.picUrl}")`
            console.log('图片', imgs);

            this.$refs.htmlbacc.style.backgroundImage = imgs
          });
    },
  },




  watch: {
    gecitop(newV) {
      this.$refs.gecibox.scrollTop = newV
      // console.log(this.geci[0]);
      // console.log(this.songlyricIndex);




    },
    songlyricIndex(newindex) {

      // this.$emit('setsonglyir', this.geci[newindex].text)
      console.log(this.geci[newindex]?.text);

      this.playsonglyeis = this.geci[newindex]?.text


    },

    AudioplaysongId(newV) {
      console.log(newV);
      this.axios
        .get("/song/detail", {
          params: {
            ids: this.AudioplaysongId,
          },
        })
        .then((res) => {
          this.song = res.data.songs[0];
          // this.$nextTick(() => {
          let imgs = `url("${res.data.songs[0]?.al?.picUrl}")`
          console.log('图片', imgs);

          this.$refs.htmlbacc.style.backgroundImage = imgs
          // })

          console.log("歌曲", this.song);
        });


      this.axios.get(`/lyric?id=${newV}`).then((res) => {
        let songarr = res.data.lrc.lyric;
        console.log("获取", songarr);

        let songGeci = songarr.split("\n").filter((item) => item);

        console.log(songGeci);
        this.jindu = [...songGeci];
        var parsedLyric = songGeci.map((item, index) => {
          var res = item.match(
            /\[(?<m>\d{2}):(?<s>\d{2}\.\d{2,3})\](?<str>.*)/i
          );
          return {
            time: res ? res.groups.m * 60 + parseFloat(res.groups.s) : null,
            text: res ? res.groups.str.trim() : "Invalid lyric format",
            id: index,
          };
        });

        let ssrarr = parsedLyric.filter((item) => {
          return item.text != ''
        })
        console.log(ssrarr);
        this.geci = [...ssrarr];

        // songGeci.match(/\[(?<m>\d{2}):(?<s>\d{2}\.\d{2,3})\](?<str>.*)/i)

        this.$nextTick(() => {
          console.log("歌词列表", this.$refs.lyricElm);

          this.songlyrics = this.$refs.lyricElm.map(
            (ele) => ele.offsetHeight
          );
        });
      })

    },


    songoldTime: function (songoldTime) {
      if (!this.inputing) {
        this.userValue = songoldTime;
      }
      if (this.xuanzhon) {
        this.gecitop = this.songlyrics.slice(0, this.songlyricIndex).reduce((total, num) => total + num, 0) - 200
      }

    },
  },
};
</script>

<style lang="less" scoped>
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.3s ease;
}

.slide-enter,
.slide-leave-to

/* .slide-leave-active in <2.1.8 */
  {
  transform: translateY(100%);
}

.songList {
  position: absolute;
  bottom: 0vh;
  left: 0;

  width: 100vw;
  height: 60vh;
  // background-color: rgba(245, 245, 245);

  overflow-y: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  z-index: 2;
}



.lb {

  background-color: rgba(61, 61, 61, 0.8);
  /* 半透明背景 */
  backdrop-filter: blur(10px);
  /* 背景模糊 */
  -webkit-backdrop-filter: blur(10px);
  /* 兼容老版本Safari */
  border-radius: 10px 10px 0 0;
  padding: 10px 0;

  border-top: 2px solid rgb(255, 255, 255);

}



.zhezhao {
  height: 100vh;
  // top: -100vh;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0);

  z-index: 1;
}


@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

nav {
  height: 5vh;
  justify-content: space-around;
}


@keyframes gecirun {
  0% {
    background-position-x: 100%;
  }

  100% {
    background-position-x: 0%;
    // background-image: linear-gradient(to right, rgb(255, 128, 0) 49%, rgb(0, 195, 255) 51%);
    // color: transparent;
  }
}

.playsonglyeis {
  width: 100vw;
  text-align: center;
  height: 10vh;

  font-weight: 700;
  color: rgba(255, 255, 255, .5);
}


.container {
  width: 100vw;
  height: 100vh;
  // background-color: #2a211c;
  background-color: rgba(42, 33, 28, .8);
  /* 半透明背景 */
  backdrop-filter: blur(10px);
  /* 背景模糊效果 */
  -webkit-backdrop-filter: blur(10px);
  /* Safari 兼容性 */

  display: flex;
  flex-flow: column;
  justify-content: space-around;
  color: white;
  // font-weight: 700;

  text-shadow: 1px 1px 3px #181818
}

.anima {
  animation: rotate 6s linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.playing {
  animation-play-state: running;
}

.cententbx {
  position: relative;

  .zhizhen {
    width: 30vw;
    height: 22vh;
    position: absolute;
    left: calc(50% - 30px);
    bottom: -210px;
    background-color: #b89712;
    background: url('../assets/ZhiZhen.png') no-repeat;
    background-position-x: -19.4vw;

    background-size: 49vw;
    z-index: 500;

    transition: all .6s;

  }

  .playyes {
    transform-origin: 17px 20px;
    transform: rotate(-10deg);

  }

  .playno {
    transform-origin: 17px 20px;
    transform: rotate(-35deg);
  }
}

.fenxiang {
  width: 80vw;
  height: 25vh;
  position: fixed;
  top: 50%;
  left: 50%;

  background-color: rgba(255, 255, 255, 0.2);
  /* 半透明背景 */
  backdrop-filter: blur(10px);
  /* 背景模糊 */
  -webkit-backdrop-filter: blur(10px);
  /* 兼容老版本Safari */



  transform: translate(-50%, -50%);
  z-index: 200;

  display: flex;
  align-items: center;
  flex-flow: column;
  justify-content: space-between;
  border-radius: 15px;
  padding: 20px 20px 0 20px;

  div:nth-of-type(3) {
    width: 100%;
    display: flex;

    span {
      width: 50%;
      height: 35px;
      display: flex;
      justify-content: center;
      // align-items: center;
    }
  }

  div:nth-of-type(2) {
    height: 60px;

    span {
      display: inline-block;
      width: 100%;
      height: 40px;
      overflow-x: auto;
      border-radius: 5px;
      border: 1px solid rgb(206, 206, 206);
      padding: 5px;
    }
  }
}

.fenxiangzhezhao {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 50%;
  left: 50%;
  background-color: rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%);
  z-index: 100;
}

// .bigbox {
//   width: 100%;
//   height: 800px;
//   // background: linear-gradient(to bottom right, #3498db, #9b59b6, #e74c3c, #f1c40f);
//   color: #989898;
//   margin: 0 auto;
//   display: flex;
//   flex-flow: column;
//   justify-content: space-evenly;
//   align-items: center;
//   border-radius: 30px;
// }
.BoFangic {
  width: 100%;
  display: flex;
  flex-flow: column;
  padding: 0 20px;

  .time {
    display: flex;
    flex-flow: wrap-reverse;

    justify-content: space-between;
  }

  .btnbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 20vh;
  }
}

.lyricbox {
  width: 100%;
  height: 50vh;
  //   background-color: #d8d8d8;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;

  .songimg {
    width: 300px;
    height: 300px;
    border-radius: 150px;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    background: url("../assets/DiePianBianKuang.png") center center no-repeat;
    background-size: 317px;

    .imgbor {
      width: 200px;
      height: 200px;
      border-radius: 150px;
      overflow: hidden;
    }
  }
}

.lyricbox2 {
  width: 100%;
  height: 50vh;

  transition: all .5s;

  overflow-y: auto;
  margin: 5vh 0;

  color: rgba(255, 255, 255, 0.3);

  div {
    // height: 30px;
    line-height: 30px;
    transition: all .5s;

  }

  span {
    font-size: 14px;
    line-height: 25px;
    display: inline-block;
    background-size: 200%;
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-clip: text;
  }


  .altt {
    // transform: scale(1.4);
    // font-size: 35px;
    color: white;
    font-weight: 700;

    span {
      // color: red;

      font-size: 25px;
      line-height: 30px;

      //   background-image: linear-gradient(to right, blue 49%, red 51%);
      //   color: transparent;
      //   background-position-x: 0%;

      animation: gecirun 3s linear;
      animation-play-state: paused;
      background-image: linear-gradient(to right,
          rgb(255, 41, 3) 48%,
          rgb(212, 212, 212) 52%);
      color: transparent;
      text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.185);
    }
  }

  &::-webkit-scrollbar {
    display: none;
  }

  //   background-color: lightblue;
  // background-image: linear-gradient(to bottom,
  //     transparent 0%,
  //     white 20%,
  //     white 80%,
  //     transparent 100%);
  // background-clip: text;

  // color: transparent;

  &.playing {

    span {
      animation-play-state: running;
    }

  }
}


// .zhezhao {
//   position: absolute;
//   top: -1px;
//   left: 0;

//   width: 100%;
//   height: 7vh;
//   // background-color: #9b59b6;
//   box-shadow: inset 0 60px 30px -30px rgba(42, 33, 28, .5);
//     /* 上下内阴影 */

// }

// .zhezhao2 {
//   position: absolute;
//   bottom: -1px;
//   left: 0;

//   width: 100%;
//   height: 7vh;
//   // background-color: #9b59b6;
//   box-shadow: inset 0 -60px 30px -30px rgba(42, 33, 28, .5);

//     /* 上下内阴影 */
// }

.songTitle {
  width: 100%;
  padding: 0 20px;
  margin-top: 10px;

  display: flex;
  justify-content: space-between;

  .leftbox {
    display: flex;
    flex-flow: column;
    color: #b4b4b4;
    font-size: 14px;

    .title {
      font-size: 17px;
      color: white;
      font-weight: 700;
    }
  }

  .rightbox {
    display: flex;

    .ShouCang {
      width: 40px;
      height: 40px;

      img {
        width: 100%;
        height: auto;
      }

    }
  }
}

// 2a211c

.song {
  text-align: center;
}

.lyri {
  width: 100%;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;

  /* overflow: hidden; */
  position: absolute;
  transition: all 0.5s;
}

.xuanzhon {
  color: rgb(255, 149, 0);
  font-size: 30px;
}

.btn {
  width: 60px;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  text-align: center;
  border: #9b59b6 2px solid;
  border-radius: 15px;
  color: #b89712;
  background-color: #fff;
}

li {
  margin: 0;
  padding: 0;
  list-style: none;
}

audio {
  width: 100%;
  height: 60px;
}


/* 滑动条容器样式 */
.time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 0;

  span {
    margin-top: 10px;
  }
}

/* 滑动条样式 */
input[type="range"] {
  -webkit-appearance: none;
  /* 移除默认样式 */
  width: 100%;
  /* 宽度 */
  height: 5px;
  /* 高度 */
  background: #888;
  /* 轨道颜色 */
  border-radius: 5px;
  /* 轨道圆角 */
  outline: none;
  /* 移除轮廓线 */
  opacity: 0.7;
  /* 轨道透明度 */
  margin: 0 10px;
  /* 与时间标签的间距 */
  transition: opacity 0.3s ease;
  /* 过渡效果 */
}

/* 滑块样式 */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  /* 滑块宽度 */
  height: 15px;
  /* 滑块高度 */
  background: #ff4c4c;
  /* 滑块颜色 */
  border-radius: 50%;
  /* 滑块圆角 */
  cursor: pointer;
  /* 鼠标样式 */
  border: 2px solid #fff;
  /* 滑块边框 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* 滑块阴影 */
}

/* Firefox 滑块样式 */
input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: #ff4c4c;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
}

/* IE 滑块样式 */
input[type="range"]::-ms-thumb {
  width: 15px;
  height: 15px;
  background: #ff4c4c;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
}

/* 焦点样式 */
input[type="range"]:focus {
  opacity: 1;
  /* 焦点时轨道透明度 */
}

input[type="range"]:focus::-webkit-slider-thumb {
  background: #ff6a6a;
  /* 焦点时滑块颜色 */
}

input[type="range"]:focus::-moz-range-thumb {
  background: #ff6a6a;
}

input[type="range"]:focus::-ms-thumb {
  background: #ff6a6a;
}
</style>